CSS Grid பெயரிடப்பட்ட கோடு தீர்வுமுறையை விளக்குதல்: ஒரு முழுமையான வழிகாட்டி

CSS Grid Layout என்பது வலை மேம்பாட்டில் சிக்கலான மற்றும் ரெஸ்பான்சிவ் தளவமைப்புகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். அதன் மிகவும் பயனுள்ள அம்சங்களில் ஒன்று grid கோடுகளுக்கு பெயரிடும் திறன், இது மேலும் அர்த்தமுள்ள மற்றும் பராமரிக்கக்கூடிய குறியீட்டை அனுமதிக்கிறது. இருப்பினும், CSS Grid இந்த பெயரிடப்பட்ட கோடுகளை எவ்வாறு தீர்க்கிறது என்பதைப் புரிந்துகொள்வது, குறிப்பாக பல கோடுகள் ஒரே பெயரைப் பகிரும்போது, விரும்பிய தளவமைப்பை அடைவதற்கு முக்கியமானது. இந்த விரிவான வழிகாட்டி CSS Grid பெயரிடப்பட்ட கோடு தீர்வுமுறையின் நுணுக்கங்கள், கோடு குறிப்பு கணக்கீடு ஆகியவற்றை ஆராய்ந்து, இந்த அத்தியாவசிய கருத்தை நீங்கள் மாஸ்டர் செய்ய உதவும் நடைமுறை எடுத்துக்காட்டுகளை வழங்கும்.

பெயரிடப்பட்ட Grid கோடுகள் என்றால் என்ன?

CSS Grid-இல், grid கோடுகள் என்பவை grid-இன் கட்டமைப்பை வரையறுக்கும் கிடைமட்ட மற்றும் செங்குத்து கோடுகள் ஆகும். இயல்பாக, இந்த கோடுகள் 1-இல் இருந்து தொடங்கும் அவற்றின் எண் குறியீட்டால் குறிப்பிடப்படுகின்றன. பெயரிடப்பட்ட grid கோடுகள் இந்த கோடுகளுக்கு அர்த்தமுள்ள பெயர்களை ஒதுக்க உங்களை அனுமதிக்கின்றன, இது உங்கள் குறியீட்டை மேலும் படிக்கக்கூடியதாகவும் புரிந்துகொள்ள எளிதாகவும் ஆக்குகிறது. சிக்கலான தளவமைப்புகளைக் கையாளும் போது இது மிகவும் பயனுள்ளதாக இருக்கும், அங்கு எண் குறியீடுகளை நினைவில் கொள்வது சிரமமாக இருக்கும்.

நீங்கள் grid-template-columns மற்றும் grid-template-rows பண்புகளைப் பயன்படுத்தி பெயரிடப்பட்ட grid கோடுகளை வரையறுக்கலாம். இதன் தொடரியல், பண்புகளின் மதிப்பில் சதுர அடைப்புக்குறிக்குள் [] கோட்டின் பெயரைச் சேர்ப்பதை உள்ளடக்கியது.

உதாரணம்: அடிப்படை பெயரிடப்பட்ட Grid கோடுகள்

            .grid-container {
 display: grid;
 grid-template-columns: [col-start] 1fr [col-middle] 1fr [col-end];
 grid-template-rows: [row-start] 1fr [row-middle] 1fr [row-end];
}

.grid-item {
 /* Position the item using named lines */
 grid-column-start: col-start;
 grid-column-end: col-end;
 grid-row-start: row-start;
 grid-row-end: row-end;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், நாம் பத்திகள் மற்றும் வரிசைகள் இரண்டிற்கும் பெயரிடப்பட்ட கோடுகளை வரையறுத்துள்ளோம். பின்னர் .grid-item இந்த பெயரிடப்பட்ட கோடுகளைப் பயன்படுத்தி நிலைநிறுத்தப்படுகிறது.

ஒரே பெயருடன் பல கோடுகளின் சக்தி

CSS Grid-இன் வெளிப்படையாகத் தெரியாத, ஆனால் நம்பமுடியாத அளவிற்கு சக்திவாய்ந்த அம்சங்களில் ஒன்று, பல grid கோடுகளுக்கு ஒரே பெயரை ஒதுக்கும் திறன். இது உங்கள் grid தளவமைப்பில் மீண்டும் மீண்டும் வரும் வடிவங்களை உருவாக்க உங்களை அனுமதிக்கிறது, சிக்கலான வடிவமைப்புகளை நிர்வகிப்பதை எளிதாக்குகிறது. இருப்பினும், CSS Grid இந்த தெளிவற்ற குறிப்புகளை எவ்வாறு தீர்க்கிறது என்பதைப் புரிந்துகொள்ள வேண்டிய தேவையையும் இது அறிமுகப்படுத்துகிறது.

உதாரணம்: மீண்டும் மீண்டும் வரும் பெயரிடப்பட்ட கோடுகள்

            .grid-container {
 display: grid;
 grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end];
 grid-template-rows: [row-start] 1fr [row-end row-start] 1fr [row-end];
}

.grid-item-1 {
 grid-column-start: col-start 1;
 grid-column-end: col-end 1;
 grid-row-start: row-start 1;
 grid-row-end: row-end 1;
}

.grid-item-2 {
 grid-column-start: col-start 2;
 grid-column-end: col-end 2;
 grid-row-start: row-start 2;
 grid-row-end: row-end 2;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், பத்திகள் மற்றும் வரிசைகள் இரண்டிலும் மீண்டும் மீண்டும் வரும் col-start/col-end மற்றும் row-start/row-end பெயர்கள் உள்ளன. ஒரு குறிப்பிட்ட கோட்டைக் குறிக்க, நீங்கள் பெயர், ஒரு இடைவெளி, மற்றும் நீங்கள் தேர்ந்தெடுக்க விரும்பும் கோட்டின் குறியீட்டைப் பயன்படுத்துகிறீர்கள்.

CSS Grid பெயரிடப்பட்ட கோடு தீர்வுமுறை: வழிமுறை

ஒரே பெயருடன் பல கோடுகள் இருக்கும்போது, உங்கள் CSS-இல் நீங்கள் அதைக் குறிப்பிடும்போது எந்தக் கோட்டைப் பயன்படுத்த வேண்டும் என்பதைத் தீர்மானிக்க CSS Grid ஒரு குறிப்பிட்ட வழிமுறையைப் பயன்படுத்துகிறது. இந்த வழிமுறை உங்கள் தளவமைப்புகள் எவ்வாறு செயல்படும் என்பதைப் புரிந்துகொள்வதற்கு முக்கியமானது.

தீர்வு செயல்முறையை பின்வருமாறு சுருக்கமாகக் கூறலாம்:

1. குறிப்பிட்ட தன்மை (Specificity): CSS Grid முதலில் கோட்டின் பெயர் பயன்படுத்தப்படும் selector-இன் குறிப்பிட்ட தன்மையைக் கருத்தில் கொள்கிறது. அதிக குறிப்பிட்ட தன்மை கொண்ட selectors முன்னுரிமை பெறும்.
2. வெளிப்படையானது vs. மறைமுகமானது (Explicit vs. Implicit): வெளிப்படையாக வரையறுக்கப்பட்ட கோடுகள் (grid-template-columns மற்றும் grid-template-rows ஐப் பயன்படுத்தி) மறைமுகமாக உருவாக்கப்பட்ட கோடுகளை விட (எ.கா., grid-auto-columns அல்லது grid-auto-rows ஐப் பயன்படுத்தும்போது) முன்னுரிமை பெறும்.
3. குறியீட்டு அடிப்படையிலான தீர்வுமுறை (Index-based Resolution): பல கோடுகள் ஒரே பெயரைக் கொண்டிருக்கும்போது, நீங்கள் எந்தக் கோட்டைக் குறிவைக்க விரும்புகிறீர்கள் என்பதைக் குறிப்பிட ஒரு குறியீட்டைப் பயன்படுத்தலாம் (எ.கா., col-start 2). குறியீடு 1-இல் இருந்து தொடங்குகிறது.
4. திசைத்தன்மை (Directionality): நீங்கள் grid-column-start/grid-row-start அல்லது grid-column-end/grid-row-end ஐப் பயன்படுத்துகிறீர்களா என்பதைப் பொறுத்தும் தீர்வுமுறை பாதிக்கப்படுகிறது. -start பண்புகளுக்கு, எண்கள் grid-இன் தொடக்கத்திலிருந்து தொடங்குகின்றன. -end பண்புகளுக்கு, எண்கள் grid-இன் முடிவிலிருந்து தொடங்கி பின்னோக்கி எண்ணப்படுகின்றன.
5. எதிர்மறை குறியீட்டு முறை (Negative Indexing): grid கோடுகளின் முடிவிலிருந்து எண்ணுவதற்கு நீங்கள் எதிர்மறை குறியீடுகளைப் பயன்படுத்தலாம். எடுத்துக்காட்டாக, col-end -1 என்பது கடைசி `col-end` கோட்டைக் குறிக்கிறது.

குறியீட்டு அடிப்படையிலான தீர்வுமுறையின் விரிவான விளக்கம்

குறியீட்டு அடிப்படையிலான தீர்வுமுறையை இன்னும் ஆழமாக ஆராய்வோம். இந்த எடுத்துக்காட்டைக் கவனியுங்கள்:

            .grid-container {
 display: grid;
 grid-template-columns: [a] 1fr [b] 1fr [a] 1fr [b];
 grid-template-rows: [c] 1fr [d] 1fr [c] 1fr [d];
}

.grid-item {
 grid-column-start: a 2;
 grid-column-end: b -1;
 grid-row-start: c 1;
 grid-row-end: d -2;
}

            

              
                Copy
              
            
          

இந்த சூழ்நிலையில்:

• grid-column-start: a 2; என்பது 'a' என்று பெயரிடப்பட்ட இரண்டாவது கோட்டைத் தேர்ந்தெடுக்கிறது.
• grid-column-end: b -1; என்பது 'b' என்று பெயரிடப்பட்ட கடைசிக்கு முந்தைய கோட்டைத் தேர்ந்தெடுக்கிறது (முடிவிலிருந்து எண்ணும்போது).
• grid-row-start: c 1; என்பது 'c' என்று பெயரிடப்பட்ட முதல் கோட்டைத் தேர்ந்தெடுக்கிறது.
• grid-row-end: d -2; என்பது 'd' என்று பெயரிடப்பட்ட கடைசிக்கு மூன்றாவது கோட்டைத் தேர்ந்தெடுக்கிறது (முடிவிலிருந்து எண்ணும்போது).

உங்கள் grid தளவமைப்புகளின் மீது துல்லியமான கட்டுப்பாட்டிற்கு இந்த நுணுக்கங்களைப் புரிந்துகொள்வது இன்றியமையாதது.

கோடு குறிப்பு கணக்கீடு: CSS Grid உங்கள் வழிமுறைகளை எவ்வாறு விளக்குகிறது

கோடு குறிப்பு கணக்கீடு என்பது CSS Grid இயந்திரம் உங்கள் கோடு பெயர் குறிப்புகளை விளக்கி அவற்றை குறிப்பிட்ட grid கோடு நிலைகளுக்கு மொழிபெயர்க்கும் செயல்முறையாகும். இந்த கணக்கீடு மேலே குறிப்பிடப்பட்ட அனைத்து காரணிகளையும் கணக்கில் எடுத்துக்கொள்கிறது, இதில் குறிப்பிட்ட தன்மை, வெளிப்படையான/மறைமுகமான வரையறைகள், குறியீட்டு முறை மற்றும் திசைத்தன்மை ஆகியவை அடங்கும்.

கணக்கீட்டு செயல்முறையின் ஒரு முறிவு இங்கே:

1. சாத்தியமான பொருத்தங்களைக் கண்டறிதல்: இயந்திரம் முதலில் கொடுக்கப்பட்ட பெயருடன் பொருந்தக்கூடிய அனைத்து grid கோடுகளையும் கண்டறிகிறது.
2. குறியீட்டின் மூலம் வடிகட்டுதல் (வழங்கப்பட்டிருந்தால்): ஒரு குறியீடு வழங்கப்பட்டால் (எ.கா., a 2), இயந்திரம் குறிப்பிட்ட குறியீட்டில் உள்ள கோட்டை மட்டும் சேர்க்கும் வகையில் பொருத்தங்களை வடிகட்டுகிறது.
3. திசைத்தன்மையைக் கருத்தில் கொள்ளுதல்: இது ஒரு -start அல்லது -end பண்பா என்பதைப் பொறுத்து, இயந்திரம் grid கோடுகளின் தொடக்கத்திலிருந்து அல்லது முடிவிலிருந்து எண்ணுவதற்கு குறியீட்டு முறையை சரிசெய்கிறது.
4. முரண்பாடுகளைத் தீர்த்தல்: வடிகட்டிய பிறகும் பல கோடுகள் பொருந்தினால், மீதமுள்ள முரண்பாடுகளைத் தீர்க்க இயந்திரம் குறிப்பிட்ட தன்மை மற்றும் வெளிப்படையான/மறைமுகமான வரையறைகளைப் பயன்படுத்துகிறது.
5. இறுதி நிலையைத் தீர்மானித்தல்: பின்னர் இயந்திரம் தேர்ந்தெடுக்கப்பட்ட grid கோட்டின் இறுதி எண் நிலையை தீர்மானிக்கிறது.

உதாரணம்: கோடு குறிப்பு கணக்கீட்டை விளக்குதல்

            .grid-container {
 display: grid;
 grid-template-columns: [start] 1fr [middle] 1fr [start] 1fr [end];
 grid-template-rows: [top] 1fr [center] 1fr [bottom];
}

.item {
 grid-column-start: start 2;
 grid-column-end: end;
 grid-row-start: top;
 grid-row-end: bottom;
}

            

              
                Copy
              
            
          

grid-column-start: start 2; க்கான கோடு குறிப்பு கணக்கீட்டைப் பகுப்பாய்வு செய்வோம்:

1. சாத்தியமான பொருத்தங்களைக் கண்டறிதல்: இயந்திரம் 'start' என்று பெயரிடப்பட்ட இரண்டு கோடுகளைக் காண்கிறது.
2. குறியீட்டின் மூலம் வடிகட்டுதல்: '2' என்ற குறியீடு வழங்கப்பட்டுள்ளது, எனவே இயந்திரம் 'start' என்று பெயரிடப்பட்ட இரண்டாவது கோட்டைத் தேர்ந்தெடுக்கிறது.
3. திசைத்தன்மையைக் கருத்தில் கொள்ளுதல்: இது ஒரு -start பண்பு, எனவே இயந்திரம் தொடக்கத்திலிருந்து எண்ணுகிறது.
4. முரண்பாடுகளைத் தீர்த்தல்: குறியீடு ஒரு தனி கோட்டை தனிமைப்படுத்துவதால் எந்த முரண்பாடுகளும் இல்லை.
5. இறுதி நிலையைத் தீர்மானித்தல்: இறுதி நிலை 3வது பத்தி கோடு ஆகும் (ஏனெனில் முதல் 'start' கோடு முதல் பத்தி கோடு, மற்றும் இரண்டாவது 'start' கோடு மூன்றாவது பத்தி கோடு).

எனவே, பொருள் 3வது பத்தி கோட்டில் தொடங்கும்.

பெயரிடப்பட்ட கோடுகளைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

பெயரிடப்பட்ட கோடுகளின் ஆற்றலை திறம்பட பயன்படுத்த, இந்த சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

• அர்த்தமுள்ள பெயர்களைப் பயன்படுத்துங்கள்: கோட்டின் நோக்கத்தை தெளிவாக விவரிக்கும் பெயர்களைத் தேர்வுசெய்யுங்கள். எடுத்துக்காட்டாக, sidebar-start, main-content-end, header-bottom ஆகியவை line1 அல்லது colA போன்ற பொதுவான பெயர்களை விட ಹೆಚ್ಚು விளக்கமானவை.
• பெயரிடும் மரபுகளை நிறுவுங்கள்: சீரான பெயரிடும் மரபுகள் குறியீட்டின் வாசிப்புத்திறனையும் பராமரிப்புத்திறனையும் மேம்படுத்துகின்றன. எடுத்துக்காட்டாக, grid-இன் பகுதியைக் குறிக்க ஒரு முன்னொட்டைப் பயன்படுத்தலாம் (எ.கா., header-start, header-end, footer-start, footer-end).
• தெளிவின்மையைத் தவிர்க்கவும்: பல கோடுகளுக்கு ஒரே பெயரைப் பயன்படுத்துவது சக்திவாய்ந்ததாக இருந்தாலும், கவனமாக நிர்வகிக்கப்படாவிட்டால் குழப்பத்திற்கும் வழிவகுக்கும். விரும்பிய கோடுகளை வெளிப்படையாகக் குறிவைக்க குறியீட்டு முறை மற்றும் எதிர்மறை குறியீட்டு முறையைப் பயன்படுத்தவும்.
• உங்கள் Grid-ஐ ஆவணப்படுத்துங்கள்: உங்கள் பெயரிடப்பட்ட கோடுகளின் நோக்கத்தையும் அவை எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதையும் விளக்க உங்கள் CSS-இல் கருத்துரைகளைச் சேர்க்கவும். இது மற்ற டெவலப்பர்களுக்கும் (மற்றும் உங்கள் எதிர்காலத்திற்கும்) உங்கள் grid கட்டமைப்பைப் புரிந்துகொள்ள உதவும்.
• DevTools-ஐப் பயன்படுத்துங்கள்: நவீன உலாவி DevTools, பெயரிடப்பட்ட கோடுகளைக் காட்சிப்படுத்துவது உட்பட, CSS Grid தளவமைப்புகளை ஆய்வு செய்ய சிறந்த கருவிகளை வழங்குகிறது. உங்கள் grid கட்டமைப்புகளை பிழைத்திருத்தவும் புரிந்துகொள்ளவும் இந்த கருவிகளைப் பயன்படுத்தவும்.
• அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்: CSS Grid உடன் உருவாக்கப்பட்ட காட்சி தளவமைப்பு குறைபாடுகள் உள்ள பயனர்களுக்கும் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யுங்கள். உள்ளடக்கத்தை வழிநடத்தவும் புரிந்துகொள்ளவும் மாற்று வழிகளை வழங்க அர்த்தமுள்ள HTML மற்றும் ARIA பண்புகளைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, தலைப்புகளின் (h1-h6) பொருத்தமான பயன்பாடு ஒரு தர்க்கரீதியான கட்டமைப்பை வழங்க முடியும்.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

நிஜ உலக சூழ்நிலைகளில் பெயரிடப்பட்ட கோடுகளை எவ்வாறு பயன்படுத்தலாம் என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்.

1. ஒரு ரெஸ்பான்சிவ் வலைத்தள தளவமைப்பை உருவாக்குதல்

ஒரு header, sidebar, main content பகுதி மற்றும் footer உடன் ஒரு ரெஸ்பான்சிவ் வலைத்தள தளவமைப்பை உருவாக்க பெயரிடப்பட்ட கோடுகளைப் பயன்படுத்தலாம். மீடியா வினவல்களைப் பயன்படுத்தி வெவ்வேறு திரை அளவுகளுக்கு grid-ஐ எளிதாக சரிசெய்யலாம்.

            .grid-container {
 display: grid;
 grid-template-columns: [full-start] minmax(200px, 1fr) [sidebar-start] 250px [sidebar-end main-start] minmax(300px, 3fr) [main-end full-end];
 grid-template-rows: [header-start] auto [header-end nav-start] auto [nav-end main-start] 1fr [main-end footer-start] auto [footer-end];
 grid-gap: 10px;
}

header {
 grid-column: full-start / full-end;
 grid-row: header-start / header-end;
}

nav {
 grid-column: sidebar-start / main-end;
 grid-row: nav-start / nav-end;
}

main {
 grid-column: main-start / main-end;
 grid-row: main-start / main-end;
}

aside {
 grid-column: sidebar-start / sidebar-end;
 grid-row: main-start / main-end;
}

footer {
 grid-column: full-start / full-end;
 grid-row: footer-start / footer-end;
}

@media (max-width: 768px) {
 .grid-container {
 grid-template-columns: [full-start] 1fr [full-end];
 grid-template-rows: [header-start] auto [header-end nav-start] auto [nav-end main-start] 1fr [main-end aside-start] auto [aside-end footer-start] auto [footer-end];
 }
 nav {
 grid-column: full-start / full-end;
 }
 aside {
 grid-column: full-start / full-end;
 grid-row: aside-start / aside-end;
 }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு ஒரு அடிப்படை வலைத்தள தளவமைப்பை எவ்வாறு உருவாக்குவது மற்றும் முக்கிய உள்ளடக்கத்திற்கு கீழே வழிசெலுத்தல் மற்றும் sidebar-ஐ அடுக்குவதன் மூலம் சிறிய திரைகளுக்கு அதை எவ்வாறு மாற்றுவது என்பதைக் காட்டுகிறது.

2. ஒரு கேலரி தளவமைப்பை உருவாக்குதல்

படங்கள் பல வரிசைகள் மற்றும் பத்திகளில் பரவக்கூடிய ஒரு நெகிழ்வான மற்றும் ஆற்றல்மிக்க கேலரி தளவமைப்பை உருவாக்க பெயரிடப்பட்ட கோடுகளைப் பயன்படுத்தலாம்.

            .gallery {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 grid-template-rows: [row-start] auto [row-end];
 grid-auto-rows: auto;
 grid-gap: 10px;
}

.gallery-item:nth-child(1) {
 grid-column: 1 / span 2;
 grid-row: row-start / span 2;
}

.gallery-item:nth-child(2) {
 grid-column: 3 / span 1;
 grid-row: row-start / span 1;
}

/* Add more gallery items with different spans */

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு முதல் கேலரி உருப்படியை இரண்டு பத்திகள் மற்றும் இரண்டு வரிசைகளில் பரப்புவது எப்படி என்பதைக் காட்டுகிறது, இது ஒரு பார்வைக்கு சுவாரஸ்யமான தளவமைப்பை உருவாக்குகிறது.

3. ஒரு சிக்கலான படிவ தளவமைப்பை உருவாக்குதல்

லேபிள்கள் மற்றும் உள்ளீட்டு புலங்கள் சரியாக சீரமைக்கப்பட்ட சிக்கலான படிவ தளவமைப்புகளை உருவாக்குவதை பெயரிடப்பட்ட கோடுகள் எளிதாக்கலாம்.

            .form {
 display: grid;
 grid-template-columns: [label-start] auto [label-end input-start] 1fr [input-end];
 grid-template-rows: repeat(auto-fill, minmax(40px, auto));
 grid-gap: 5px;
}

label {
 grid-column: label-start / label-end;
}

input {
 grid-column: input-start / input-end;
}

/* Add labels and input fields for each form element */

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு அனைத்து லேபிள்களும் இடதுபுறம் சீரமைக்கப்பட்டுள்ளதையும், உள்ளீட்டு புலங்கள் வலதுபுறம் சீரமைக்கப்பட்டுள்ளதையும் உறுதிசெய்கிறது, இது ஒரு சுத்தமான மற்றும் ஒழுங்கமைக்கப்பட்ட படிவ தளவமைப்பை உருவாக்குகிறது.

உலகளாவிய பரிசீலனைகள்

CSS Grid-ஐ, குறிப்பாக பெயரிடப்பட்ட கோடுகளுடன், உலகளாவிய திட்டங்களுக்குப் பயன்படுத்தும்போது, பின்வருவனவற்றை மனதில் கொள்ளுங்கள்:

• வலமிருந்து இடமாக (RTL) மொழிகள்: CSS Grid தானாகவே RTL மொழிகளைக் கையாளுகிறது. இருப்பினும், RTL சூழல்களில் தளவமைப்பு சரியாகக் காட்டப்படுவதை உறுதிசெய்ய உங்கள் பெயரிடப்பட்ட கோடுகளையும் grid கட்டமைப்புகளையும் சரிசெய்ய வேண்டியிருக்கலாம். தர்க்கரீதியான பண்புகள் (எ.கா., left மற்றும் right க்கு பதிலாக start மற்றும் end) மிகவும் உதவியாக இருக்கும்.
• வெவ்வேறு எழுத்துருக்கள்: உங்கள் பெயரிடப்பட்ட கோடுகள் மற்றும் CSS selectors அனைத்து எழுத்துருக்களாலும் ஆதரிக்கப்படும் எழுத்துக்களைப் பயன்படுத்துவதை உறுதிசெய்யுங்கள். சில சூழல்களில் சிக்கல்களை ஏற்படுத்தக்கூடிய சிறப்பு எழுத்துக்கள் அல்லது ASCII அல்லாத எழுத்துக்களைப் பயன்படுத்துவதைத் தவிர்க்கவும்.
• அணுகல்தன்மை: உங்கள் grid தளவமைப்புகளை வடிவமைக்கும்போது அணுகல்தன்மைக்கு முன்னுரிமை அளிக்க நினைவில் கொள்ளுங்கள். குறைபாடுகள் உள்ள பயனர்களுக்கு உள்ளடக்கத்தை வழிநடத்தவும் புரிந்துகொள்ளவும் மாற்று வழிகளை வழங்க அர்த்தமுள்ள HTML மற்றும் ARIA பண்புகளைப் பயன்படுத்தவும்.
• செயல்திறன்: CSS Grid பொதுவாக செயல்திறன் மிக்கதாக இருந்தாலும், பல பெயரிடப்பட்ட கோடுகள் மற்றும் ஒன்றுடன் ஒன்று இணையும் கூறுகளுடன் கூடிய சிக்கலான grid தளவமைப்புகள் செயல்திறனைப் பாதிக்கலாம். ஒரு சுமூகமான பயனர் அனுபவத்தை உறுதிசெய்ய உங்கள் grid கட்டமைப்புகளை மேம்படுத்தி தேவையற்ற சிக்கல்களைத் தவிர்க்கவும்.
• சோதனை: உங்கள் grid தளவமைப்புகளை வெவ்வேறு உலாவிகள், சாதனங்கள் மற்றும் திரை அளவுகளில் முழுமையாகச் சோதித்து, அவை எல்லா சூழல்களிலும் சரியாகக் காட்டப்படுவதை உறுதிசெய்யுங்கள். உங்கள் grid கட்டமைப்புகளை ஆய்வு செய்யவும் பிழைத்திருத்தவும் உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.

மேம்பட்ட நுட்பங்கள்

`grid-template-areas`-ஐ பெயரிடப்பட்ட கோடுகளுடன் பயன்படுத்துதல்

இந்தக் கட்டுரை grid-template-columns மற்றும் grid-template-rows உடன் வரையறுக்கப்பட்ட பெயரிடப்பட்ட grid கோடுகளில் கவனம் செலுத்தினாலும், grid-template-areas grid தளவமைப்புகளை வரையறுக்க மற்றொரு சக்திவாய்ந்த வழிமுறையை வழங்குகிறது என்பது குறிப்பிடத்தக்கது. பத்திகள் மற்றும் வரிசைகளில் வரையறுக்கப்பட்ட பெயரிடப்பட்ட கோடுகளைப் பகுதிகளுடன் இணைத்து மிகவும் வெளிப்படையான மற்றும் பராமரிக்கக்கூடிய தளவமைப்புகளை உருவாக்கலாம்.

            .grid-container {
 display: grid;
 grid-template-columns: [col-start] 1fr [col-middle] 1fr [col-end];
 grid-template-rows: [row-start] 1fr [row-middle] 1fr [row-end];
 grid-template-areas:
 "header header header"
 "sidebar main main"
 "footer footer footer";
}

header {
 grid-area: header;
}

sidebar {
 grid-area: sidebar;
}

main {
 grid-area: main;
}

footer {
 grid-area: footer;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், பத்தி மற்றும் வரிசை கோடுகள் வரையறுக்கப்பட்டிருந்தாலும், `grid-template-areas` பகுதிகளை வரையறுக்கவும் ஒவ்வொரு உருப்படியையும் பகுதிக்கு ஒதுக்கவும் உதவுகிறது.

பெயரிடப்பட்ட கோடுகளை CSS மாறிகளுடன் இணைத்தல்

இன்னும் அதிக நெகிழ்வுத்தன்மை மற்றும் மறுபயன்பாட்டிற்காக, நீங்கள் பெயரிடப்பட்ட கோடுகளை CSS மாறிகளுடன் இணைக்கலாம். இது மாறி மதிப்புகளின் அடிப்படையில் grid கட்டமைப்புகளை மாறும் வகையில் வரையறுக்க உங்களை அனுமதிக்கிறது.

            :root {
 --grid-column-count: 3;
}

.grid-container {
 display: grid;
 grid-template-columns: repeat(var(--grid-column-count), [col-start] 1fr) [col-end];
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், grid-இல் உள்ள பத்திகளின் எண்ணிக்கை --grid-column-count மாறியால் தீர்மானிக்கப்படுகிறது, இது ஜாவாஸ்கிரிப்ட் அல்லது மீடியா வினவல்களைப் பயன்படுத்தி மாறும் வகையில் மாற்றப்படலாம்.

முடிவுரை

CSS Grid பெயரிடப்பட்ட கோடு தீர்வுமுறை மற்றும் கோடு குறிப்பு கணக்கீட்டைப் புரிந்துகொள்வது CSS Grid Layout-ஐ மாஸ்டர் செய்வதற்கு அவசியமானது. அர்த்தமுள்ள பெயர்களைப் பயன்படுத்துவதன் மூலமும், பெயரிடும் மரபுகளை நிறுவுவதன் மூலமும், தீர்வுமுறை வழிமுறையைப் புரிந்துகொள்வதன் மூலமும், உங்கள் வலைத் திட்டங்களுக்கு நெகிழ்வான, பராமரிக்கக்கூடிய மற்றும் ரெஸ்பான்சிவ் தளவமைப்புகளை உருவாக்கலாம். அணுகல்தன்மைக்கு முன்னுரிமை அளிக்கவும், உங்கள் தளவமைப்புகளை முழுமையாகச் சோதிக்கவும், உங்கள் grid கட்டமைப்புகளை பிழைத்திருத்தவும் மேம்படுத்தவும் DevTools-இன் ஆற்றலைப் பயன்படுத்தவும் நினைவில் கொள்ளுங்கள். பயிற்சி மற்றும் பரிசோதனையுடன், நீங்கள் CSS Grid-இன் முழு ஆற்றலையும் பயன்படுத்த முடியும் மற்றும் பிரமிக்க வைக்கும் மற்றும் செயல்பாட்டு வலை வடிவமைப்புகளை உருவாக்க முடியும்.

இந்த வழிகாட்டி CSS Grid பெயரிடப்பட்ட கோடுகளை திறம்பட புரிந்துகொள்வதற்கும் பயன்படுத்துவதற்கும் ஒரு உறுதியான அடித்தளத்தை வழங்க வேண்டும். உங்கள் வலை மேம்பாட்டுத் திறன்களை மேம்படுத்தவும், உலகளாவிய பார்வையாளர்களுக்காக புதுமையான மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவங்களை உருவாக்கவும் CSS Grid-இல் கிடைக்கும் பல்வேறு அம்சங்களையும் நுட்பங்களையும் தொடர்ந்து ஆராயுங்கள்.